<template>
	<view class="recharge">
		<view class="mx15 rechargebox">
			<view class="por">
				<view class="coinBox">
					<ls-swiper :list="coinList" imgKey="imgUrl"  :crown="true" :loop="true" :shadow='true' height='92' previousMargin="200"
					 nextMargin='200' imgRadius="5" @change="tabchange"/>
				</view>
				<image src="../../static/user/tringle.png" class="tringle"></image>
			</view>
			<view class="usdtcode text--center">
				<view class="codebox">
					<tki-qrcode ref="qrcode" :val="usdt" :size="size" :unit="unit" :loadMake="loadMake" />
				</view>
				<view class="f14 usdtaddress">{{usdt}}</view>
				<view class="copybox copy1 f12" @click="copy(usdt)">
					复制地址
				</view>
			</view>
			<view class="f12 usdtips mt30 pb20" >
				请勿向上述地址充值任何其他币种资产，否则资产将不可找回。请务必确认手机安全，防止信息被篡改或泄漏。
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import LsSwiper from '@/components/ls-swiper/index.vue'
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				usdt: '0xd28j38i9qdj2uhrq092j821hghr21j39f23j2',
				cointype:0,
				coinList:[
					{name:'USDT-ERC20','0':require('@/static/user/w-1.png')},
					{name:'STD','1':require('@/static/user/w-2.png')},
					{name:'ETH','2':require('@/static/user/w-3.png')},
					{name:'BTC','3':require('@/static/user/w-4.png')},
					{name:'STD-ERC20','4':require('@/static/user/w-2.png')}
				],
				size: 370, // 二维码大小
				unit: 'upx', // 单位
				loadMake: true, // 组件加载完成后自动生成二维码
			}
		},
		components: {
			tkiQrcode,
			LsSwiper
		},
		onLoad(options) {
			// this.cointype = options.type
			// this.coinChange(this.cointype)
			// this.usdt = this.userInfo.usdt_address
		},
		methods:{
			tabchange(data){
				// console.log(data)
				this.cointype = data
				// console.log(this.cointype)
			},
			coinChange(index){
				let that = this
				that.cointype = index
				if(this.usdt){
					that.$refs.qrcode._clearCode()
				}
				that.getCharge()
				setTimeout(function(){
					that.$refs.qrcode._makeCode()
				},100)
			},
			back(){
				uni.reLaunch({
					url:'/pages/exchange/index'
				})
			},
			async copy(data) {
				await uni.setClipboardData({ data: data })
				uni.showToast({
					title: '复制成功',
					icon:'none'
				})
			},
		async getCharge(){
			let params = {
				type:this.cointype
			}
			let headerUUid = this.randomString(Math.ceil(Math.random()*10))
			let signObj =this.addQueryString(Object.assign({},params))
			signObj+= '&secretKey=YLtwNzGIGq3EKFev'
			params.sign = this.$md5(signObj)
			let { data } = await this.$http.post('exchange.recharge', params, {isAuth:true, isId:true,header:{phoneUuid :headerUUid},tipConfig: { isLoading: false } })
			this.usdt = data
		},
			async getData(){
				let { data: { jlListInfo, newNotic } } = await this.$http.post('home.index', {}, { tipConfig: { isLoading: false } })
				this.notice = newNotic
				this.jlListInfo = jlListInfo
				if(this.rengouNum == '0'){
					this.rengouNum = jlListInfo.minFees
				}else{
					this.changeNum()
				}
			}
		}
	}
</script>

<style lang="less">
	.recharge{
		.rechargebox{
			letter-spacing: 0;
			.tringle{
				width: 24rpx;
				height: 16rpx;
				position: absolute;bottom: 34rpx;
				left: 50%;
				margin-left: -12rpx;
			}
			.acClass{
				
				transform: scale(1.4);
			}
			.coinBox{
				height: 184rpx;
				.coinitem{
					height: 100%;
				}
				.coinpic{
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
			}
			.usdt{
				width: 48rpx;
				height: 48rpx;
			}
			.usdtips{
				color: #9CA2A9;
			}
			.usdtcode{
				padding: 120rpx 0 70rpx 0;
				background-color: rgba(195,198,202,0.10);
				.codebox{
					width: 370rpx;
					height: 370rpx;
					padding: 20rpx;
					background-color: #fff;
					margin: 0 auto 100rpx;
				}
				.usdtaddress{
					color: #505569;
				}
				.copybox{
					display: inline-block;
					margin:36rpx auto 0;
					padding: 8rpx 16rpx;
					border-radius: 4rpx;
				}
				.copy1{
					color: #308AE4;
					background-color: #e7f5ff;
					border:2rpx solid #64abe1
				}
			}
		}
	}
</style>
